<template>
	<view>
		<view class="cu-chat">


			<view v-for="(item, index) in data.message" :key="index">


				<view class="cu-item self" v-if="item.isSelf == true">
					<view class="main">
						<view class="content shadow">
							<text>{{ item.content }}</text>
						</view>
					</view>
					<view class="cu-avatar radius" :style="'background-image:url(' + item.active_user.avatar + ');'"></view>
					<view class="date ">{{ item.timestamp }}</view>
				</view>

				<view class="cu-item" v-else>
					<view class="cu-avatar radius" :style="'background-image:url(' + item.active_user.avatar + ');'"></view>
					<!-- <view class="cu-avatar radius"
						style="background-image: url('http://sns-webpic-qc.xhscdn.com/202402051446/a01d7eeef21d717fa25d1becc93f063c/0302ae01kpc6g4nuq4z0113eyjn07393f3!nd_dft_wlteh_webp_3');"> -->
					<!-- </view> -->

					<view class="main">
						<view class="content shadow">
							<text>{{ item.content }}</text>
						</view>
					</view>
					<view class="date "> {{ item.timestamp }}</view>
				</view>
			</view>




			<!--	<view class="cu-info round">对方撤回一条消息!</view>

			<view class="cu-info">
				<text class="cuIcon-roundclosefill text-red "></text> 对方拒绝了你的消息
			</view>
			<view class="cu-info">
				对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
				<text class="text-blue">发送好友验证</text>
			</view>
			<view class="cu-item self">
				<view class="main">
					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix">
					</image>
				</view>
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date"> 13:23</view>
			</view>
			<view class="cu-item self">
				<view class="main">
					<view class="action text-bold text-grey">
						3"
					</view>
					<view class="content shadow">
						<text class="cuIcon-sound text-xxl padding-right-xl"> </text>
					</view>
				</view>
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">13:23</view>
			</view>
			<view class="cu-item self">
				<view class="main">
					<view class="action">
						<text class="cuIcon-locationfill text-orange text-xxl"></text>
					</view>
					<view class="content shadow">
						喵星球，喵喵市
					</view>
				</view>
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">13:23</view>
			</view>
			<view class="cu-item">
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
				<view class="main">
					<view class="content shadow">
						@#$^&**
					</view>
					<view class="action text-grey">
						<text class="cuIcon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
					</view>
				</view>
				<view class="date">13:23</view>
			</view> -->
		</view>

		<view class="cu-bar foot input cum" :style="[{ bottom: InputBottom + 'px' }]">
			<input confirm-type="send" confirm-hold @confirm="push" :always-embed="true" :adjust-position="true"
				cursor-spacing="30" class="bg-white " v-model="data.text" :focus="false" maxlength="300" />
			<viwe class="cu-btn bg-green shadow" @tap.stop="push">发送</viwe>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			InputBottom: 0,
			data: {
				text: '',
				a_uid: -1, //用户uid
				p_uid: -1,  //对方uid
				page: 1,
				message: [],  //页面渲染用的数据
			},
		};
	},
	methods: {
		push() {
			let that = this
			let token = JSON.parse(uni.getStorageSync('vuexvuex'))
			var parsedData = JSON.parse(token.value);
			var tokenValue = parsedData.userinfo.token;
			let tosend = {}
			tosend.type = 'push'
			tosend.token = tokenValue
			tosend.passive_uid = that.data.p_uid
			tosend.timestamp = new Date().getTime()
			tosend.content = that.data.text
			tosend.content_type = 'text'
			console.log('%c [ tosend ]-134', 'font-size:13px; background:pink; color:#bf2c9f;', tosend)

			if (that.data.text && that.data.uid != -1) {
				this.sendMsg(tosend)
			}
			this.data.text = ''
			// that.setData({
			// 	value: '',
			// 	disabled: true
			// })
			this.getMessage()
		},
		sendMsg(data) {
			wx.sendSocketMessage({
				data: JSON.stringify(data)
			})
		},
		down() {
			this.$nextTick(function () {
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 0
					})
				}, 200) // 要加点延迟, 不然有可能不生效
			});
		},
		getMessage() {
			// uni.showToast({
			// 	title: '正在加载',
			// 	icon: 'none',
			// 	mask: true
			// })
			this.$myHttp.post({
				url: this.$myHttp.urlMap.wxGetMessage,
				data: {
					active_uid: this.data.a_uid,
					passive_uid: this.data.p_uid,
					page: this.data.page,
					limit: 1000,
				},
				needLogin: true,
				success: res => {
					if (res.data.data.length != 0) {
						this.data.message = res.data.data.data
						console.log('%c [ this.data.message ]-151', 'font-size:13px; background:pink; color:#bf2c9f;', this.data.message)

						this.down()

					}
					// if (res.data.errDetail.length != 0) {
					// 	let temp = that.data.message
					// 	let pastMsg = res.data.errDetail
					// 	for (let i = 0, n = pastMsg.length; i < n; i++) {
					// 		if (pastMsg[i].active_uid == that.data.a_uid) pastMsg[i].isSelf = true
					// 		else pastMsg[i].isSelf = false
					// 		temp.unshift(pastMsg[i])
					// 		if (pastMsg[n - i - 1].passive_uid == that.data.a_uid &&
					// 			pastMsg[n - i - 1].read == 'n') {
					// 			//如果拉取的历史消息中有未读的，发送read
					// 			sendMsg({
					// 				type: 'read',
					// 				token: wx.getStorageSync(app.globalData.nameOfCookie),
					// 				mid: pastMsg[n - i - 1].mid
					// 			})
					// 		}
					// 	}
					// 	that.data.page++;
					// 	//console.log(temp)
					// 	that.setData({
					// 		message: temp
					// 	})
					// }

				}
			})
		},

	},
	created() {
		uni.$on('refash', () => {
			console.log('刷新了消息')
			this.getMessage()

		})
	},
	onLoad(options) {
		console.log('%c [ options ]-175', 'font-size:13px; background:pink; color:#bf2c9f;', options)
		let token = JSON.parse(uni.getStorageSync('vuexvuex'))
		var parsedData = JSON.parse(token.value);
		var userID = parsedData.userinfo.user_id;
		console.log('%c [ userID ]-209', 'font-size:13px; background:pink; color:#bf2c9f;', userID)
		let that = this
		this.data.p_uid = options.p_uid
		this.data.a_uid = userID
		this.getMessage()
		wx.setNavigationBarTitle({
			title: options.nickname
		})

		const eventChannel = this.getOpenerEventChannel()
		//监听newMsgChannel
		eventChannel.on('newMsgChannel', function (data) {
			//新消息加到数组末尾
			data.data.isSelf = false
			const d = that.data.message
			d[d.length] = data.data
			that.setData({
				message: d
			})
			let read = {}
			read.type = 'read'
			read.token = wx.getStorageSync(app.globalData.nameOfCookie),
				read.passive_uid = that.data.p_uid
			read.mid = data.data.mid
			sendMsg(read)
			//console.log(read)
			setTimeout(() => {
				that.pageScrollToBottom()
			}, 200)
		})
		//监听messageSendChannel
		eventChannel.on('messageSendChannel', function (data) {
			data.data.isSelf = true
			const d = that.data.message
			d[d.length] = data.data
			that.setData({
				message: d
			})
			setTimeout(() => {
				that.pageScrollToBottom()
			}, 100)
		})

	}
}
</script>

<style>
.cum {
	height: 80px;
	align-items: none !important;
}

.cu-bar {
	background: #F6F6F6 !important;
	align-items: normal !important;
	padding-top: 10px !important;
}

page {
	background: #EDEDED !important;
	padding-bottom: 150upx;
}
</style>
